<template>
  <div class="right-sidebar">
    <div class="tags-container">
      <span v-for="(item, index) in tags" :key="index" class="tag-item" :class="{ 'active': activeTag === index }"
        @click="setActiveTag(index)">
        {{ item.text }}
      </span>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const tags = [
  { text: '原创' },
  { text: '小说改' },
  { text: '特摄' },
  { text: '漫画改' },
  { text: '游戏改' }
]

const activeTag = ref(0)

const setActiveTag = (index) => {
  activeTag.value = index
}
</script>

<style lang="scss" scoped>
.right-sidebar {
  position: fixed;
  top: 180px;
  right: 0;
  width: 50px;
  height: calc(100vh - 100px);
  padding: 20px 15px;


  box-shadow: -2px 0 15px rgba(0, 0, 0, 0.08);

  transition: all 0.3s ease;

  &:hover {
    box-shadow: -2px 0 20px rgba(0, 0, 0, 0.12);
  }

  .tags-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
    height: 100%;
    overflow-y: auto;
    padding-right: 5px;



    .tag-item {
      display: block;
      padding: 8px 12px;
      color: #111;
      border-radius: 6px;
      font-size: 13px;
      text-align: center;
      cursor: pointer;

      &:hover {
        transform: scale(1.05);
        box-shadow: 0 3px 6px rgba(0, 161, 214, 0.16);
      }

      &.active {
        background: lightgray;
      }
    }
  }
}
</style>
